/* 
    学习目标：生命周期的更新阶段
    1. render
    2. componentDidUpdate
     // 注意: React中不管state是否被使用，都会触发该函数

    触发组件更新的方式
    1. ✔ props改变
    2. ✔ setState()调用
   
  */

import React from 'react';

export default class App extends React.Component {
  state = {
    msg: 'Hello React',
  };

  render() {
    return (
      <div>
        <Son msg={this.state.msg}></Son>
        <button onClick={() => this.setState({ msg: this.state.msg + '1' })}>点我改变msg</button>
      </div>
    );
  }
}

class Son extends React.Component {
  state = {
    count: 0,
  };

  // 1. render执行
  render() {
    // 常见的错误
    // 1.不能调用setState()会导致死循环
    // this.setState({ count: this.state.count + 1 });
    // 2. 事件忘了变成函数，直接成了调用函数
    console.log('1. render被执行了');
    return (
      <div>
        <h1>{this.props.msg}</h1>
        {/* <h2>{this.state.count}</h2> */}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>点我改变count</button>
      </div>
    );
  }

  // cdu
  // 更新后执行的钩子函数
  // 注意: 这里也不能调用setState
  componentDidUpdate() {
    console.log('2. componentDidUpdate被执行了');
    // 😈 不能调用setState，会导致死循环
    // this.setState({});
  }
}
